<template>
    <div>
        <HelloComponent></HelloComponent>
        <!-- 引用ui库-单选框；@change 值改变时触发,选择不同的值，对应不同的组件 -->
        <a-radio-group v-model="selectcompenets" @change='handchange' type="button">
            <a-radio value="A">COMPONENT-A</a-radio>
            <a-radio value="B">COMPONENT-B</a-radio>
            <a-radio value="C">COMPONENT-C</a-radio>
        </a-radio-group>
        <!-- KeepAlive组件实现缓存 -->
        <!-- 动态组件用法 component :is; 修改边距 style="margin -->
        <!-- 组件通信,父组件(CompenetsPage)的值传递给子组件(CompenentA/B/C)；下面的2中方式都可以 -->
        <!-- <KeepAlive>
            <component v-bind="{plstring: selectcompenets}" :is="current" style="margin-top: 12px;"></component>
        </KeepAlive> -->
        <!-- @submit="handlerchanged"表示处理子组件传递过来的事件 -->
        <!-- <CompenentA :plstring="selectcompenets" @submit="handlerchanged"></CompenentA> -->
        <!-- 改为v-model,实现组件的双向绑定 -->
        <CompenentA v-model="selectcompenets"></CompenentA>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import CompenentA from './component/CompenentsA.vue';
import CompenentB from './component/CompenentsB.vue';
import CompenentC from './component/CompenentsC.vue';

// ref(CompenentA)中的CompenentA表示为组件；也就是选择不同的值引用不同的组件
const current = ref(CompenentA)
const handchange = (v) =>{
    switch (v) {
        case "A":
            current.value = CompenentA
            break;
        case "B":
            current.value = CompenentB
            break;
        case "C":
            current.value = CompenentC
            break;
    } 
}
const selectcompenets =ref('A')
// const handlerchanged = (v) =>{
//     selectcompenets.value=v
// }

</script>

<style lang="scss" scoped>

</style>